// 高级设置面板
// 高级功能和实验性设置

import React from 'react';
import { SettingItem } from '../components/SettingItem';
import { BaseSetting, SettingsCategory, SettingType } from '../../../types/settings';

const advancedSettings: BaseSetting[] = [
  {
    id: 'advanced.maxMemoryUsage',
    name: '最大内存使用',
    description: '应用程序可使用的最大内存（MB）',
    category: SettingsCategory.Advanced,
    type: SettingType.Number,
    defaultValue: 1024,
    currentValue: 1024,
    group: 'performance',
    validation: {
      min: 256,
      max: 8192
    },
    tags: ['内存', '性能', '限制'],
    requiresRestart: true
  },
  {
    id: 'advanced.enableGPUAcceleration',
    name: '启用GPU加速',
    description: '使用GPU加速渲染以提高性能',
    category: SettingsCategory.Advanced,
    type: SettingType.Boolean,
    defaultValue: true,
    currentValue: true,
    group: 'performance',
    tags: ['GPU', '加速', '性能'],
    requiresRestart: true
  },
  {
    id: 'advanced.enableDebugMode',
    name: '调试模式',
    description: '启用调试模式，显示详细的调试信息',
    category: SettingsCategory.Advanced,
    type: SettingType.Boolean,
    defaultValue: false,
    currentValue: false,
    group: 'debugging',
    tags: ['调试', '模式', '信息']
  },
  {
    id: 'advanced.logLevel',
    name: '日志级别',
    description: '设置应用程序的日志记录级别',
    category: SettingsCategory.Advanced,
    type: SettingType.Select,
    defaultValue: 'info',
    currentValue: 'info',
    group: 'debugging',
    validation: {
      options: [
        { value: 'error', label: '错误' },
        { value: 'warn', label: '警告' },
        { value: 'info', label: '信息' },
        { value: 'debug', label: '调试' }
      ]
    },
    tags: ['日志', '级别', '记录']
  }
];

const settingGroups = [
  {
    id: 'performance',
    name: '性能设置',
    description: '内存使用和GPU加速等性能相关设置'
  },
  {
    id: 'debugging',
    name: '调试设置',
    description: '调试模式和日志记录设置'
  }
];

export const AdvancedSettingsPanel: React.FC = () => {
  return (
    <div className="space-y-8">
      <div>
        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
          高级设置
        </h2>
        <p className="text-gray-600 dark:text-gray-400">
          高级功能和实验性设置选项
        </p>
        <div className="mt-2 p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
          <p className="text-sm text-yellow-800 dark:text-yellow-200">
            ⚠️ 请谨慎修改这些设置，错误的配置可能影响应用程序的稳定性。
          </p>
        </div>
      </div>

      {settingGroups.map((group) => {
        const groupSettings = advancedSettings.filter(s => s.group === group.id);
        
        return (
          <div key={group.id} className="space-y-4">
            <div>
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                {group.name}
              </h3>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                {group.description}
              </p>
            </div>
            
            <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
              <div className="divide-y divide-gray-200 dark:divide-gray-700">
                {groupSettings.map((setting) => (
                  <div key={setting.id} className="px-4">
                    <SettingItem setting={setting} />
                  </div>
                ))}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};
